<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>MNIST 手写识别</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}">
  </head>

  <body>

    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="https://www.pytorials.com/">About</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">MNIST 手写识别示例</h3>
      </div>

      <div class="jumbotron">
        <h3 class="jumbotronHeading">试试在方框里面画数字吧!</h3>
    <div class="slidecontainer">
      <p style="font-size:18px">拖动滑动条调整线宽.</p>
      <input type="range" min="10" max="50" value="15" id="myRange">
      <p>Value: <span id="sliderValue"></span></p>
    </div>
    <div class="canvasDiv">
          <canvas id="canvas" width="280" height="280"></canvas>
          <br>
          <p style="text-align:center;">
            <a class="btn btn-success myButton" href="#" role="button">预测</a>
            <a class="btn btn-primary" href="#" id="clearButton" role="button">清除</a>
      	</p>
        </div>
      </div>

      <div class="jumbotron">
      	<p id="result">这里可以看到识别的结果!!!</p>
      </div>

      <footer class="footer">
        <p>&copy; 2018, python36.com</p>
      </footer>

    </div> <!-- /container -->


  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="{{ url_for('static',filename='index.js') }}"></script>

    <script type="text/javascript">
     
    $(".myButton").click(function(){
      var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
      var canvasObj = document.getElementById("canvas");
      var img = canvasObj.toDataURL();
      $.ajax({
        type: "POST",
        url: $SCRIPT_ROOT + "/predict/",
        data: img,
        success: function(data){
          $('#result').text(' 预测结果是: '+data);
        }
      });
    });
   
   	</script>

  </body>
</html>